<template>
	<view class="detail-container" :style="{ background:  knowledgeDetail.color }">
		<!-- 顶部导航栏 -->
		<view class="top-nav">
			<view class="back-button" @click="goBack">
				<text class="back-icon">←</text>
			</view>
		</view>

		<!-- 头部信息卡片 -->
		<view class="header-card">
			<view class="header-gradient" :style="{ background: knowledgeDetail.color }"></view>
			<view class="header-info">
				<view class="title-section">
					<text class="main-title">{{ knowledgeDetail.title }}</text>
					<view class="meta-info">
						<view class="category-badge">
							<text class="category-text">{{ knowledgeDetail.categoryName }}</text>
						</view>
						<view class="difficulty-badge" :style="{ background: knowledgeDetail.difficultyBg }">
							<text class="difficulty-text">{{ knowledgeDetail.difficulty }}</text>
						</view>
					</view>
				</view>
				<view class="description-section">
					<text class="description-text">{{ knowledgeDetail.description }}</text>
				</view>
			</view>
		</view>

		<!-- 核心要点Swiper -->
		<swiper class="points-swiper" :indicator-dots="false" :autoplay="false" :circular="false"
			@change="onSwiperChange">
			<swiper-item v-for="(keyPoint, index) in knowledgeDetail.keyPoints" :key="index">
				<scroll-view class="point-scroll" scroll-y>
					<view class="point-card">
						<!-- 要点标题 -->
						<view class="point-header">
							<view class="point-badge">
								<text class="badge-number">{{ index + 1 }}</text>
							</view>
							<text class="point-title">核心要点 {{ index + 1 }}</text>
						</view>

						<!-- 要点说明 -->
						<view class="point-content">
							<text class="point-text">{{ keyPoint.point }}</text>
						</view>

						<!-- 代码示例 -->
						<view class="code-section">
							<view class="code-header">
								<text class="code-icon">💻</text>
								<text class="code-label">代码示例</text>
							</view>
							<view class="code-block">
								<text class="code-text">{{ keyPoint.code }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>

		<!-- 底部进度点 -->
		<view class="dots-indicator">
			<view v-for="(item, index) in knowledgeDetail.keyPoints" :key="index" class="dot"
				:class="{ 'dot-active': index === currentPointIndex }"></view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import { allKnowledgeCards } from '@/data/knowledge';
	import type { KnowledgeDetail } from '@/types/knowledge';

	const knowledgeDetail = ref<KnowledgeDetail>({
		id: 0,
		title: '',
		description: '',
		icon: '',
		categoryId: '',
		categoryName: '',
		categoryIcon: '',
		difficulty: '',
		color: '',
		headerBg: '',
		tagBg: '',
		tagColor: '',
		difficultyBg: '',
		keyPoints: []
	});

	// 当前要点索引
	const currentPointIndex = ref(0);

	/**
	 * 根据技术栈ID筛选知识卡片
	 */
	const getKnowledgeCardsByTechId = (techId: string): KnowledgeDetail[] => {
		if (techId === 'java') {
			return allKnowledgeCards.filter(card => !card.categoryId.startsWith('sql-'));
		} else if (techId === 'sql') {
			return allKnowledgeCards.filter(card => card.categoryId.startsWith('sql-'));
		}
		return [];
	};

	// 页面加载
	onLoad((options : any) => {
		const id = parseInt(options.id || '1');
		const techId = options.techId || 'java'; // 默认Java技术栈

		// 先根据技术栈筛选知识卡片
		const techKnowledgeCards = getKnowledgeCardsByTechId(techId);

		// 在筛选后的卡片中查找对应id的知识点
		const foundCard = techKnowledgeCards.find(card => card.id === id);

		// 直接使用找到的数据
		if (foundCard) {
			knowledgeDetail.value = foundCard;
		} else {
			// 如果没找到，显示错误提示
			uni.showToast({
				title: '未找到该知识点',
				icon: 'none',
				duration: 2000
			});
			// 延迟返回上一页
			setTimeout(() => {
				uni.navigateBack();
			}, 2000);
		}
	});

	// Swiper切换事件
	const onSwiperChange = (e : any) => {
		currentPointIndex.value = e.detail.current;
	};

	// 返回列表
	const goBack = () => {
		uni.navigateBack();
	};
</script>

<style lang="scss" scoped>
	.detail-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	/**
	 * 顶部导航栏
	 */
	.top-nav {
		flex-shrink: 0;
		padding: 20rpx 24rpx;
		background: transparent;
		position: relative;
		z-index: 10;
	}

	.back-button {
		width: 72rpx;
		height: 72rpx;
		background: white;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.92);
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
		}
	}

	.back-icon {
		font-size: 44rpx;
		color: #2c3e50;
		font-weight: 700;
	}

	/**
	 * 头部信息卡片
	 */
	.header-card {
		flex-shrink: 0;
		margin: 0 24rpx 24rpx;
		border-radius: 32rpx;
		background: white;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
		overflow: hidden;
		position: relative;
	}

	.header-gradient {
		height: 8rpx;
		width: 100%;
	}

	.header-info {
		padding: 32rpx;
	}

	.title-section {
		margin-bottom: 24rpx;
	}

	.main-title {
		font-size: 40rpx;
		font-weight: 800;
		color: #1a202c;
		line-height: 1.3;
		display: block;
		margin-bottom: 16rpx;
	}

	.meta-info {
		display: flex;
		align-items: center;
		gap: 12rpx;
		flex-wrap: wrap;
	}

	.category-badge {
		padding: 8rpx 20rpx;
		background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
		border-radius: 100rpx;
		border: 2rpx solid #2196f3;
	}

	.category-text {
		font-size: 24rpx;
		color: #1976d2;
		font-weight: 600;
	}

	.difficulty-badge {
		padding: 8rpx 20rpx;
		border-radius: 100rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
	}

	.difficulty-text {
		font-size: 24rpx;
		color: white;
		font-weight: 700;
	}

	.description-section {
		padding-top: 24rpx;
		border-top: 2rpx solid #e9ecef;
	}

	.description-text {
		font-size: 28rpx;
		color: #5a6c7d;
		line-height: 1.8;
	}

	/**
	 * 底部进度点指示器
	 */
	.dots-indicator {
		flex-shrink: 0;
		display: flex;
		gap: 10rpx;
		justify-content: center;
		align-items: center;
		padding: 24rpx 0 32rpx;
		background: transparent;
	}

	.dot {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background: #cbd5e1;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.dot-active {
		width: 40rpx;
		border-radius: 5rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.4);
	}

	/**
	 * 核心要点Swiper
	 */
	.points-swiper {
		flex: 1;
		overflow: hidden;
	}

	.point-scroll {
		width: 100%;
		height: 100%;
		padding-bottom: 20rpx;
	}

	/**
	 * 核心要点卡片
	 */
	.point-card {
		background: white;
		margin: 0 24rpx;
		padding: 36rpx;
		border-radius: 28rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
		min-height: calc(100% - 48rpx);
	}

	.point-header {
		display: flex;
		align-items: center;
		gap: 20rpx;
		margin-bottom: 32rpx;
	}

	.point-badge {
		width: 64rpx;
		height: 64rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 20rpx rgba(102, 126, 234, 0.35);
		position: relative;

		&::after {
			content: '';
			position: absolute;
			inset: -4rpx;
			border-radius: 18rpx;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			opacity: 0.2;
			filter: blur(8rpx);
			z-index: -1;
		}
	}

	.badge-number {
		font-size: 32rpx;
		font-weight: 900;
		color: white;
	}

	.point-title {
		flex: 1;
		font-size: 34rpx;
		font-weight: 800;
		color: #1a202c;
		letter-spacing: 0.5rpx;
	}

	.point-content {
		margin-bottom: 32rpx;
		padding: 28rpx;
		background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
		border-radius: 20rpx;
		border-left: 6rpx solid #667eea;
		position: relative;

		&::before {
			content: '💡';
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			font-size: 32rpx;
			opacity: 0.3;
		}
	}

	.point-text {
		font-size: 28rpx;
		color: #334155;
		line-height: 1.8;
		font-weight: 500;
	}

	/**
	 * 代码部分
	 */
	.code-section {
		margin-top: 8rpx;
	}

	.code-header {
		display: flex;
		align-items: center;
		gap: 12rpx;
		padding: 16rpx 24rpx;
		background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
		border-radius: 20rpx 20rpx 0 0;
		border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
	}

	.code-icon {
		font-size: 32rpx;
	}

	.code-label {
		font-size: 26rpx;
		font-weight: 700;
		color: #94a3b8;
		letter-spacing: 0.5rpx;
	}

	/**
	 * 代码块
	 */
	.code-block {
		background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
		border-radius: 0 0 20rpx 20rpx;
		padding: 28rpx;
		overflow-x: auto;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 6rpx;
			height: 100%;
			background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
		}
	}

	.code-text {
		font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
		font-size: 24rpx;
		color: #e2e8f0;
		line-height: 1.9;
		white-space: pre-wrap;
		word-break: break-all;
		padding-left: 20rpx;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
	}
</style>